<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="日志列表"
      rowKey="id"
      :columns="columns"
      :requestApi="OperLogApi.page"
      :dataCallback="dataCallback"
      :initParam="initParam"
      :searchCol="{ xs: 2, sm: 3, md: 4, lg: 6, xl: 8 }"
    >
      <!-- 表格 header 按钮 -->
      <!-- <template #tableHeader="scope" v-if="props.isShowHeader">
        <el-button type="primary" :icon="CirclePlus" v-hasPermi="['sys:customer:add']" @click="openDrawer('新增')">新增客户</el-button>
        <el-button type="primary" :icon="Download" v-hasPermi="['sys:customer:export']" @click="downloadFile">导出客户</el-button>
        <el-button type="danger" :icon="Delete" :disabled="!scope.isSelected" v-hasPermi="['sys:customer:remove']" @click="batchDelete(scope.selectedListIds)">批量删除</el-button>
      </template> -->
      <!-- 表格操作 -->
      <!-- <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" v-hasPermi="['sys:customer:edit']" @click="openDrawer('编辑', scope.row)">编辑</el-button>
        <el-button type="danger" link :icon="Delete" v-hasPermi="['sys:customer:remove']" @click="batchDelete([scope.row.id])">删除</el-button>
        <el-button type="warning" link :icon="Share" v-hasPermi="['sys:customer:share']" @click="customerToPublic(scope.row.id)">转入公海</el-button>
      </template> -->
    </ProTable>
  </div>
</template>
<script setup lang="ts" name="CustomerManager">
import { ref, reactive, h } from 'vue'
import { ColumnProps } from '@/components/ProTable/interface'
import ProTable from '@/components/ProTable/index.vue'
import { OperLogApi } from '@/api/modules/operLog'
//import { CirclePlus, Download, EditPen, Delete, Share } from '@element-plus/icons-vue'
//import { useHandleData } from '@/hooks/useHandleData'
import { BusinessTypeList, BusinessStatusList } from '@/configs/enum'
import { ElTag } from 'element-plus'
// import { ElMessageBox } from 'element-plus'
// import { useDownload } from '@/hooks/useDownload'

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref()

const props = defineProps({
  isShowHeader: {
    type: Boolean,
    default: true
  }
})

defineExpose({
  proTable
})

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ isPublic: 0 })

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total
  }
}

// 表格配置项
const columns: ColumnProps[] = [
  {
    prop: 'id',
    label: '日志编号',
    width: 80
  },
  {
    prop: 'title',
    label: '操作模块',
    search: { el: 'input' },
    minWidth: 120
  },
  {
    prop: 'businessType',
    label: '操作类型',
    enum: Object.values(BusinessTypeList),
    search: {
      el: 'select',
      props: {
        placeholder: '请选择业务类型'
      }
    },
    width: 120,
    render: (scope) => {
      const businessType = scope.row.businessType
      const typeName = getBusinessTypeName(businessType)
      return h('span', typeName)
    }
  },
  {
    prop: 'operName',
    label: '操作人员',
    search: { el: 'input' },
    width: 100
  },
  {
    prop: 'operIp',
    label: '操作IP',
    width: 130
  },
  {
    prop: 'operUrl',
    label: '操作地址',
    minWidth: 150,
    showOverflowTooltip: true
  },
  {
    prop: 'status',
    label: '状态',
    enum: Object.values(BusinessStatusList),
    search: {
      el: 'select',
      props: {
        placeholder: '请选择操作状态'
      }
    },
    width: 100,
    render: (scope) => {
      const status = scope.row.status
      const statusName = getStatusName(status)
      const type = status === 0 ? 'success' : 'danger'
      return h(ElTag, { type }, () => statusName)
    }
  },
  {
    prop: 'costTime',
    label: '耗时(ms)',
    width: 100,
    render: (scope) => {
      return h('span', null, `${scope.row.costTime} ms`)
    }
  },
  {
    prop: 'operTime',
    label: '操作时间',
    width: 200,
    search: {
      el: 'date-picker',
      props: {
        type: 'datetimerange',
        'value-format': 'YYYY-MM-DD HH:mm:ss',
        'start-placeholder': '开始时间',
        'end-placeholder': '结束时间',
        span: 3
      }
    },
    render: (scope) => {
      return formatTime(scope.row.operTime)
    }
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 300, isShow: props.isShowHeader }
]

// 获取业务类型名称
const getBusinessTypeName = (businessType: number) => {
  const found = Object.values(BusinessTypeList).find((item) => item.value === businessType)
  return found ? found.label : '未知'
}

// 获取状态名称
const getStatusName = (status: number) => {
  const found = Object.values(BusinessStatusList).find((item) => item.value === status)
  return found ? found.label : '未知'
}
// 格式化时间
const formatTime = (time: string) => {
  if (!time) return ''
  try {
    return new Date(time).toLocaleString('zh-CN')
  } catch {
    return time
  }
}

// 打开 drawer(新增、查看、编辑)
// const dialogRef = ref()
// const openDrawer = (title: string, row: Partial<any> = {}) => {
//   let params = {
//     title,
//     row: { ...row },
//     isView: title === '查看',
//     api: CustomerApi.saveOrEdit,
//     getTableList: proTable.value.getTableList,
//     maxHeight: '300px'
//   }
//   dialogRef.value.acceptParams(params)
// }
</script>
